<template>
  <Teleport to="body">
    <div class="toast">
      <div class="modal" @click="close">
      </div>
      <div class="card">
        <div class="title">{{ props.title }}</div>
        <slot name="content"></slot>
        <slot name="footer"></slot>
        <div class="text">
          {{ props.text }}
        </div>
        <slot name="default"></slot>
      </div>
    </div>
  </Teleport>
</template>

<script setup>
import {onMounted, getCurrentInstance} from 'vue'
const props = defineProps({
  title: {
    default() {
      return '提醒'
    },
  },
  modelValue: {
    default() {
      return false
    }
  }, 
  text: String
})

const emits = defineEmits(['update:modelValue'])

const close = () => {
  emits('update:modelValue', false)
}

onMounted (() => {
  console.log(getCurrentInstance());
  console.log(123123);
})
</script>

<style lang="scss" scoped>
.toast {
  z-index: 100000;
  top: 0;
  left: 0;
  position: fixed;
  height: 100vh;
  width: 100vw;
}

.modal {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  background: rgba(0, 0, 0, 0.3);

}

.card {
  width: 5.9rem;
  min-height: 4.21rem;
  position: absolute;
  top: 4.26rem;
  left: 50%;
  transform: translateX(-50%);
  background-color: #fff;
  z-index: 100000;
  padding-top: 0.5rem;
  border-radius: 0.16rem;

  .close {
    width: 0.28rem;
    height: 0.28rem;
    background: #9A9A9A;
    border-radius: 50%;
  }

  .title {
    text-align: center;
    font-size: 0.36rem;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    color: #242424;
    line-height: 0.48rem;
  }

}
</style>